<template>
  <div class="SeatRecord">
    <Header title="订座记录"></Header>
    <scroller :on-infinite="infinite" :on-refresh="refresh" ref="myscroller">
      <div style="padding:35px 6px 0 6px">
        <tab :line-width="0" v-model="selected" prevent-default @on-before-index-change="onItemClick">
          <tab-item style="font-size: 15px">待使用
          </tab-item>
          <tab-item style="font-size: 15px">已使用
          </tab-item>
          <tab-item style="font-size: 15px">已过期
          </tab-item>
        </tab>
        <div class="SeatRecordinfo" v-for="(item,index) in seatlist" :key="index">
          <div style="display: flex;">
            <div>店铺名称</div>
            <div class="shopname">{{item.shopName}}</div>
          </div>
          <div style="display: flex;">
            <div>预约时间</div>
            <div>{{item.orderTime}}</div>
          </div>
          <div class="anthor" style="display: flex;">
            <div>
              座位类型
            </div>
            <div class="_after" v-if="selected===2">该订单已过期</div>
          </div>
          <div style="padding-top: 0px;font-size: 12px">
            <span v-for="(_item,index) in item.orderSeats">{{_item.name}}<span
              v-if="index!==item.orderSeats.length-1">，</span></span>
          </div>
          <div class="Settlement" v-if="selected===1">
            小计: <span>￥{{item.billAmount}}元</span>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
  import {Tab, TabItem} from 'vux'
  import Header from './../Header'
  import {SeatRecord} from '../../api/mine'

  export default {
    data () {
      return {
        selected: 0,
        seatlist: [],
        pageNo: 0,
        pageSize: 0,
        usestatus: '0',//0 待使用 2,3已使用 -1 已过期
        changetab: true
      }
    },
    created () {
      // this.seat_list()
    },
    methods: {
      seat_list () {
        SeatRecord({
          'page-no': this.pageNo,
          'page-size': this.pageSize,
          'status': this.usestatus
        }).then(res => {
          this.seatlist = this.seatlist.concat(res.data.data.resultList)
        })
      },
      onItemClick (num) {
        if (this.selected === num) {
          return
        }
        if(this.changetab){
          if (num == 0) {
            this.usestatus = '0'
          }
          if (num == 1) {
            this.usestatus = '2,3'
          }
          if (num == 2) {
            this.usestatus = '-1'
          }
          this.$refs.myscroller.loadingState = 0//切换tab时 重新开启上拉加载
          this.pageNo = 0
          this.pageSize = 0
          this.seatlist = []
          this.selected = num
        }



        // this.seat_list()
      },
      infinite (done) {
        if (this.changetab) {
          this.pageNo += 1
          this.pageSize += 10
          this.changetab = false
          SeatRecord({
            'page-no': this.pageNo,
            'page-size': this.pageSize,
            'status': this.usestatus
          }).then(res => {
            this.seatlist = this.seatlist.concat(res.data.data.resultList)
            this.changetab = true
            if (res.data.data.resultList.length < 10) {
              done(true)
            }
          })
        }

      },
      refresh () {
        this.pageNo = 1
        this.pageSize = 10
        SeatRecord({
          'page-no': this.pageNo,
          'page-size': this.pageSize,
          'status': this.usestatus
        }).then(res => {
          this.seatlist = res.data.data.resultList
          this.$refs.myscroller.finishPullToRefresh()
        })
      }
    },
    components: {
      Tab,
      TabItem,
      Header
    },
  }
</script>

<style lang="less" type="text/less">
  .SeatRecord {
    color: #808080;
    .vux-tab-wrap {
      margin-top: 12px;
    }
    .shopname {
      color: @common-color;
      font-size: 15px;
    }
    .Settlement {
      text-align: right;
      border: none;
      font-size: 14px;
      & > span {
        color: @common-color;
      }
    }

    .vux-tab {
      border-radius: 8px;
      background: #fff;
      color: @common-color;
      .vux-tab-item {
        background: #fff;
      }
    }
    .SeatRecordinfo {
      background: #fff;
      padding: 0 8px;
      border-radius: 5px;
      margin-top: 6px;
      & > div {
        border-bottom: 1px #F8FAF9 solid;
        padding: 12px 0;
        font-size: 14px;
        & > div {
          &:first-child {
            text-align: left;
            width: 80px;
            font-size: 15px;
          }
          &:nth-child(2) {
            text-align: right;
            flex: 1;
          }
        }
      }
      .anthor {
        border: none;
        ._after {
          font-size: 12px;
          color: @common-color;
        }
        & + div {
          &:last-child {
            text-align: left;
            font-size: 12px;
          }
        }
      }
    }
  }


</style>
